< template >
	<
	view class = "uv-page" >
	<
	view v -
	for = "item in signList": key = "item.id" >
	<
	view class = "uv-demo-block list" >
	<
	text class = "uv-demo-block__title" > { { item.checkin_datetime } } < /text> <
	view class = "uv-demo-block__content" >
	<
	view class = "album" >
	<
	view class = "album__avatar" >
	<
	image src = "/static/uvui/common/logo.png"
mode = ""
style = "width: 32px; height: 32px" > < /image> <
	/view> <
	view class = "album__content" >
	<
	uv - text: text = "item.checkin_datetime"
type = "primary"
bold size = "17" > < /uv-text> <
	uv - text margin = "0 0 8px 0": text = "item.checkin_note" > < /uv-text> <
	uv - album: multipleSize = "62": urls = "item.image"
rowCount = "3"
maxCount = "10"
multipleMode = "scaleToFill" > < /uv-album> <
	/view> <
	/view> <
	/view> <
	/view> <
	!--占位元素， 用于监听进入视口事件-- >
	<
	!-- < view v -
	else class = "placeholder"
ref = "placeholders" > < /view> --> <
	/view>

	<
	view class = "wrap"
ref = "backTop" >
	<
	uv - back - top: scroll - top = "scrollTop": duration = "500" > < /uv-back-top> <
	/view>

	<
	view class = "fixed-bottom" >
	<
	uv - button text = "去打卡签到"
size = "large"
type = "success"
color = "rgb(10, 185, 156)"
@click = "goTo('/pages/index/sign')" > < /uv-button> <
	/view> <
	/view> <
	/template>

	<
	script >
	export default {
		data() {
			return {
				scrollTop: 0,
				albumWidth: 0,
				mid: '', // 用户id
				page: 1,
				// 每页的数据数量
				pageSize: 10,
				// 新增触底计数器，初始值为 0
				reachBottomCount: 0,
				lists: [],
				// 定义要渲染的数据
				signList: [],
			};
		},

		onReady() {
			// setTimeout(() => {
			//   this.setupIntersectionObserver();
			// }, 100);
		},
		onLoad(options) {
			this.getMid(options)
			this.getSignDataList(options)
			console.info("options", options);
			// (this.cid = this.value = options.id), (this.f = options.f),
			this.loadmore();
		},


		onReachBottom() {
			// 每次触底时，计数器加 1
			this.reachBottomCount++;
			console.log("第", this.reachBottomCount, "次触底");
			this.loadmore(this.reachBottomCount + 1);
		},
		methods: {

			getMid(options) {
				this.$data.mid = options.mid
			},

			// 获取数据
			getSignDataList(options) {
				let that = this
				let { page, pageSize } = that.$data
				uni.request({
					url: `https://open.web.jinrijiesuan.cn/snm/index?mid=${options.mid}&page=${page}&page_size=${pageSize}`,
					success(res) {
						console.log(res, 7777);
						that.$data.signList = res.data.data
					}
				})
			},

			goTo(page) {
				// 使用 uni.navigateTo 跳转到 album 页面
				uni.navigateTo({
					url: page,
				});
			},
			setupIntersectionObserver() {
				const observers = [];
				this.$nextTick(() => {
					console.info("this.$refs.placeholders", this.$refs.placeholders);
					if (this.$refs.placeholders && this.$refs.placeholders.length > 0) {
						this.$refs.placeholders.forEach((placeholder, index) => {
							try {
								const observer = uni.createIntersectionObserver(this, {
									thresholds: [0],
								});

								console.info("-place--", observer);

								observer.relativeToViewport().observe(placeholder, (res) => {
									console.info("res", res);

									if (res.intersectionRatio > 0) {
										console.info("---", this.demoBlocks[index].isVisible);
										this.demoBlocks[index].isVisible = true;
										observer.disconnect();
									}
								});
								observers.push(observer);
								console.info("observers", observer);
							} catch (error) {
								console.log("创建 IntersectionObserver 出错:", error);
							}
						});
					} else {
						console.log("未获取到占位元素");
					}
				});
			},

			loadmore(page = 1) {
				if (res.data.code === 1) {
					// 假设接口返回的数据是一个包含图片链接的数组
					// const newData = res.data.map(url => ({ url }));
					// 将新数据添加到 indexList 中
					this.lists = this.lists.concat(res.data.data);
					// 请求成功后，页码加 1
					this.page++;
				} else {
					console.error("请求失败:", res.data.msg);
				}
				this.getSignDataList()
				// 发起网络请求
				// uni.request({
				// 	// url: this.$apiHost + "/api/automobileshop/index/lists",
				// 	url: "http://open.web.jinrijiesuan.cn/tt",
				// 	method: "GET", // 根据接口要求选择合适的请求方法
				// 	data: {
				// 		page: page,
				// 		pageSize: this.pageSize,
				// 	},
				// 	success: (res) => {
				// 		console.info("----", res);

				// 	},
				// 	fail: (err) => {
				// 		console.error("请求出错:", err);
				// 	},
				// });
			},
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
	}; <
/script>

<
style lang = "scss" >
	$uv - bg - color: #f3f4f6!
	default;
@import "@/common/demo.scss";

.album {
	@include flex;
	align - items: flex - start;

	&
	__avatar {
		background - color: $uv - bg - color;
		padding: 5 px;
		border - radius: 3 px;
	}

	&
	__content {
		margin - left: 10 px;
		flex: 1;
	}
}

.wrap {
	height: 500 px;
}

.placeholder {
	height: 100 px;
	/* 占位元素高度，可根据实际情况调整 */
}

/* 新增固定底部样式 */
.fixed - bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15 px;
		background - color: #fff;
		/* 可根据需求修改背景颜色 */
		display: flex;
		justify - content: center;
		box - shadow: 0 - 2 px 10 px rgba(0, 0, 0, 0.1);
		/* 可根据需求添加阴影 */

		flex - direction: column;
		align - items: stretch;
		flex - wrap: nowrap;
	} <
	/style>